<template>
    <ul>
        <li>{{ user.name }}</li>
        <li>{{ user.age }}</li>
        <li>{{ user.sex }}</li>

    </ul>
    <button @click="handle">点击</button>
</template>

<script lang="ts">
    import { defineComponent, reactive } from "vue"
    export default defineComponent({
        //reactive 通常用来定义复杂数据类型的响应 返回的是一个proxy代理对象
        setup() {
            let user:any = reactive({
                name:"张三",
                age: 18
            })
            console.log(user)
            function handle(){
                console.log(user.name)
                //直接调用数据
                user.name = "孙悟空"
                user.age += 50
                user.sex = "男"
                //缺陷 bug
                // 直接给user重新赋值，会丢失响应式
                //如果重新赋值，丢失的是原来响应式数据的指针地址，变一个新的指针地址
                user = {
                    name: "猪八戒",
                    age:20
                }
                
            }
            return {
                user,
                handle
            }
        }
    })
</script>
